<template>
  <div class="rounded-xl text-white p-3 flex justify-between bg-gray-200/40 mb-3">
    <div class="flex-1">
      <div>
        全部订单总额：<span class="text-red-500">{{ info.allTotalAmount }}</span>
      </div>
      <div>
        全部订单总数：<span class="text-red-500">{{ info.allTotal }}</span>
      </div>
      <div>
        全部成单总额：<span class="text-red-500">{{ info.successTotalAmount }}</span>
      </div>
    </div>
    <div class="flex-1">
      <div>
        全部成单总数：<span class="text-red-500">{{ info.successTotal }}</span>
      </div>
      <div>
        全部总佣金：<span class="text-red-500">{{ info.totalCommission }}</span>
      </div>
      <div>
        下级总返点：<span class="text-red-500">{{ info.totalRebate }}</span>
      </div>
    </div>
  </div>

  <van-list @load="LoadData" :finished="finished" :finished-text="'没有更多了'" :loading="loading">
    <div :key="index" v-for="(item, index) in list" class="border mb-2 rounded p-1 py-2 bg-white">
      <div class="flex justify-between border-b mb-3 text-current">
        <div class="flex-1">每日统计</div>
        <div>更新时间：{{ dayjs(item.update_time*1000).format('YYYY-MM-DD HH:mm:ss') }}</div>
      </div>

      <div class="flex justify-between text-sm">
        <div>成单总额：{{ item.totalOrderAmount }}</div>
        <div>成单总数：{{ item.totalOrderCount }}</div>
      </div>
      <div class="flex justify-between text-sm">
        <div>失败总额：{{ item.totalFailureAmount }}</div>
        <div>失败总数：{{ item.totalFailureCount }}</div>
      </div>

      <div class="flex justify-between mt-3 text-sm">
        <div>接单佣金：{{ item.commission }}</div>
        <div>下级返点：{{ item.rebate }}</div>
      </div>
      <div class="flex justify-between text-sm">
        <div>充值金额：{{ item.payAmount }}</div>
        <div>提现金额：{{ item.withdrawal }}</div>
      </div>
    </div>
  </van-list>
</template>
<script setup lang="ts">
import { GetOrderStatisticsApi, GetPaymentStatisticsApi } from '@/apis/user'
import dayjs from 'dayjs'
import { ref, watch } from 'vue'

const page = ref(1)
const loading = ref(false)
const finished = ref(false)
const info = ref({})
const list = ref([])

const props = defineProps({
  type: {
    type: String,
    default: 'ds'
  }
})

function LoadData() {
  if (loading.value) return
  loading.value = true
  if (props.type == 'ds') {
    GetOrderStatisticsApi({ page: page.value })
      .then((res) => {
        info.value = res
        if (res.list.length > 0) {
          page.value++
          list.value.push(...res.list)
        } else {
          finished.value = true
        }
      })
      .finally(() => {
        loading.value = false
      })
  } else {
    GetPaymentStatisticsApi({ page: page.value })
      .then((res) => {
        info.value = res
        if (res.list.length > 0) {
          page.value++
          list.value.push(...res.list)
        } else {
          finished.value = true
        }
      })
      .finally(() => {
        loading.value = false
      })
  }
}

watch(
  () => props.type,
  (val) => {
    page.value = 1
    finished.value = false
    list.value = []
    LoadData()
  }
)
</script>
